import React, { useState, useRef,useEffect } from 'react';
import Top from './components/Top'
import TopMini from './components/TopMini'
import LabWelcome from "./components/LabWelcome";
import ChartContent from './components/ChartContent';
import BtnScrollToBottom from './components/BtnScrollToBottom'
import TxtChart from './components/TxtChart';
import TxtPlus from './components/TxtChartPlus';
import LabVersion from './components/LabVersion';

import ScrollToBottom from 'react-scroll-to-bottom';

import WsCharts from '../../utils/wscharts';

const Chart = () => {
    //#region 页面参数
    /**
     * 当前选择模型，默认星火免费大模型
     */
    const [model, setModel] = useState("Spark Lite");
    /** 
     * 当前聊天状态
     * listen 机器人 聆听中
     * speak 机器人 说话中（可打断）
     * wait 与后台请求中
    */
    const [state, setState] = useState('listen')
    /**
     * 页面展示当前聊天内容
     */
    const [charts, setCharts] = useState(null)
    /**
     * 当前回答消息字串
     */
    const refContent = useRef(null)
    /**
     * 聊天对象 new WsCharts
     */
    const wsChart = useRef(null);
    // 真正聊天IO数据存储
    const refChart = useRef([])
    //#endregion

    //#region 页面方法
    /**聊天消息 发送与回读 */
    const onSendClick = async (val) => {
        setState('wait')
        if (!wsChart.current) {
            wsChart.current = new WsCharts(model, sendCallBack)
        }
        refChart.current.push({ role: 'user', content: val })
        setCharts([...refChart.current,{role:'',content:''}])
    }
    const sendCallBack = async (type, msg) => {
        if (type === 'open') { //开始回答
            setState('speak')
        } else if (type === 'close') { //回答结束
            setState('listen')
            setCharts(refChart.current)
        } else {
            if(msg.length > 0){
                refChart.current[refChart.current.length-1].role = msg[0].role
                refChart.current[refChart.current.length-1].content = refChart.current[refChart.current.length-1].content + msg[0].content;
                
                refContent.current.send(refChart.current[refChart.current.length-1].content)
            }
        }
    }
    useEffect(()=> {
        // 更新页面后，向服务器发送消息
        if(charts && charts[charts.length-1].role===''){
            wsChart.current.send([...refChart.current])
            // 更新answer回答
            refChart.current.push({role:'',content:''})
        }
    },[charts])
    //#endregion
    return <div className="relative flex h-full w-full overflow-hidden transition-colors z-0">
        <div className="relative flex h-full max-w-full flex-1 flex-col overflow-hidden">
            <TopMini />
            <div className="no-draggable flex w-full items-center justify-center bg-token-main-surface-primary md:hidden"></div>
            <main className="relative h-full w-full flex-1 overflow-auto transition-width">
                {!charts && <div
                    role="presentation"
                    className="composer-parent flex h-full flex-col focus-visible:outline-0"
                    tabIndex="0"
                >
                    <div className="flex-1 overflow-hidden @container/thread">
                        <div className="relative h-full">
                            <div className="absolute left-0 right-0">
                                <Top />
                            </div>
                            <div className="flex h-full flex-col items-center justify-center text-token-text-primary">
                                <div className="h-full w-full @lg/thread:py-[18px]">
                                    <div className="m-auto text-base px-3 w-full md:px-5 lg:px-4 xl:px-5 h-full">
                                        <div className="mx-auto flex h-full w-full flex-col text-base @lg/thread:justify-center @md/thread:max-w-3xl">
                                            <div className="mb-7 hidden text-center @lg/thread:block">
                                                <LabWelcome />
                                            </div>
                                            <div className="justify-center mt-[var(--screen-optical-compact-offset-amount)] h-full flex-shrink flex-col items-center overflow-hidden text-token-text-primary [display:var(--display-hidden-until-loaded,flex)] @lg/thread:hidden" style={{ opacity: 1, willChange: 'auto' }}>
                                                <LabWelcome />
                                                <div className="h-[116px]" style={{ opacity: 1, willChange: 'auto' }}>
                                                    <TxtPlus className="flexwap" />
                                                </div>
                                            </div>
                                            <div className="@lg/thread:absolute @lg/thread:bottom-8 @lg/thread:left-0 @lg/thread:w-full">
                                                <div className="mx-auto flex h-full w-full flex-col text-base @lg/thread:justify-center @md/thread:max-w-3xl">
                                                    <div className="block z-20">
                                                        <div className="relative h-full w-full">
                                                            <div className="mb-2 flex flex-col gap-3.5 pt-2"></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div className="w-full">
                                                <div className="flex justify-center"></div>
                                                <TxtChart init={charts === null} state={state} model={model} onSend={onSendClick} />
                                            </div>
                                            <div className="hidden @lg/thread:block h-[70px]" style={{ opacity: 1, willChange: 'auto' }}>
                                                <TxtPlus className="flexnowap" />
                                            </div>
                                            <div className="w-full px-2 py-2 text-center text-xs text-token-text-secondary empty:hidden md:px-[60px] @lg/thread:absolute @lg/thread:bottom-0 @lg/thread:left-0">
                                                <LabVersion />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>}
                {charts && <div
                        role="presentation"
                        className="composer-parent flex h-full flex-col focus-visible:outline-0"
                    >
                        <div className="flex-1 overflow-hidden @container/thread">
                            <div className="h-full">
                                <ScrollToBottom className="h-full" followButtonClassName="hidden">
                                    <div className="flex flex-col text-sm md:pb-9">
                                        <Top />
                                        <ChartContent ref={refContent} charts={charts} model={model} />
                                        <BtnScrollToBottom />
                                    </div>
                                </ScrollToBottom>
                            </div>
                        </div>
                        <div className="md:pt-0 dark:border-white/20 md:border-transparent md:dark:border-transparent w-full">
                            <div>
                                <div className="m-auto text-base px-3 md:px-4 w-full md:px-5 lg:px-4 xl:px-5">
                                    <div
                                        className="mx-auto flex flex-1 gap-4 text-base md:gap-5 lg:gap-6 md:max-w-3xl"
                                    >
                                        <div className="flex justify-center"></div>
                                        <TxtChart state={state} model={model} onSend={onSendClick} />
                                    </div>
                                </div>
                                <div
                                    className="relative w-full px-2 py-2 text-center text-xs text-token-text-secondary empty:hidden md:px-[60px]"
                                >
                                    <LabVersion />
                                </div>
                            </div>
                        </div>
                </div>}
            </main>
        </div>
    </div>;
};

export default Chart;